<!doctype html>
<html>
@include('top.title')
<body>
<style>
    .text > p > img {
        width: 10%;
        height: 10%;
    }
    header{
        margin-top: -10px;
    }
</style>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
@include('top.header')
@if(!empty(session('success')))
    <div id="tishi" style="background-color: #caeaca;position:absolute; margin: 829px 2px 4px 1602px;width:300px;height: 38px;padding:10px;border-radius: 50px;">
        <span style="text-align: center;display:block;"> 提示信息：{{session('success')}}</span>
    </div>
@endif
<img src="/images/b3_1.jpg" alt="" style="width: 100%;height: 100%">
<div style="margin:-720px 0px 0px 1354px;padding:5px;width: 328px;height:255px;position:absolute;background-color: rgb(203, 226, 245,0.5);border-radius: 10px">
    <div style="margin: 14px 4px 10px 18px;">
        <span  style="color: #03a9f4">注册</span>
        <a href="/login" style="margin-left: 100px;"><span>已经有帐号去-></span> 登录</a>
    </div>
    <form action="/login/create" method="get" autocomplete="on">
        {{ csrf_field() }}
        <div class="input-group">
            <input type="text" name="name" required maxlength="11" class="form-control" placeholder="请输入用户名"
                   id="name" aria-describedby="sizing-addon2" style="margin-bottom: 20px;border-radius: 7px;width: 318px"  value="{{old('name')}}" >
            <span style="position:absolute;margin: 33px 0 0px 202px;width: 130px;color: red;"hidden id="cunzai">用户名已经存在！</span>
        </div>
        <div class="input-group">
            <input type="password" name="password" required maxlength="11" class="form-control" placeholder="请输入密码"
                id="mima" aria-describedby="sizing-addon2" style="margin-bottom: 20px;border-radius: 7px;width: 318px"  value="{{old('password')}}">
        </div>
        <div class="input-group">
            <input type="password" name="cpassword" required maxlength="11" class="form-control" placeholder="请输入确认密码"
                  id="queren" aria-describedby="sizing-addon2" style="margin-bottom: 20px;border-radius: 7px;width: 318px" value="{{old('cpassword')}}">
        </div>
        <span style="position:absolute;margin:-18px 0px 0px 233px;width: 100px;color: red;"hidden id="mimas">密码不一致！</span>
        <button id="btn" disabled type="submit" class="btn btn-success" style="width: 100%;margin-bottom: -15px">注册</button>
    </form>
</div>
</body>
</html>
<script>
    $("#queren").hover(function () {
        var mima = $("#mima").val();
        var queren = $("#queren").val();
        if(queren){
            if(mima != queren){
                $("#mima").css("border","1px solid red")
                $("#queren").css("border","1px solid red")
                $("#mimas").css('display','block');
            }else{
                $("#mima").css("border","none")
                $("#queren").css("border","none")
                $("#mimas").hide();
                document.getElementById("btn").disabled=false;
            }
        }
    })
    $("#name").hover(function () {
        var name = $("#name").val();
        $.ajax({
            type: 'post',
            url: "{{url('/login/zuce')}}",
            data: {"name":name, '_token': "{{csrf_token()}}"},
            dateType: "json",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            success: function (result) {
                if(result.status=="false"){
                    $("#name").css("border","1px solid red")
                    $("#cunzai").css('display','block');
                    document.getElementById("btn").disabled=true;
                }else{
                    $("#name").css("border","none")
                    $("#cunzai").hide();
                    document.getElementById("btn").disabled=false;
                }
            }
        })
    });
</script>